<template>
  <div>
    <el-dropdown @command="handleCommand">
      <el-avatar :src="avatarUrl" />
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="(item, index) in dataList"
            :key="item.name"
            :command="index"
          >
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            {{ item.title }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
import { Avatar, Unlock, Right } from "@element-plus/icons-vue";
import { post } from "@/utils/http";

export default {
  data() {
    return {
      dataList: [
        { icon: "Avatar", title: "个人信息", name: "myinformation" },
        { icon: "Unlock", title: "密码修改", name: "amendpassword" },
        { icon: "Right", title: "退出登录", name: "" },
      ],
      avatarUrl: "",
    };
  },
  components: {
    Avatar,
    Unlock,
    Right,
  },
  created() {
    // 获取头像
    this.avatarUrl = this.$store.state.admin.user.avatarUrl || "";
  },
  methods: {
    // 点击下拉菜单的选项
    handleCommand(index) {
      let name = this.dataList[index].name;
      if (name) {
        //跳转到对应页面
        this.$router.push({ name });
      } else {
        // 触发vuex中的退出登录函数
        this.$store.dispatch("logout");
      }
    },
  },
};
</script>

<style></style>
